<template>
    <view class="container">
        <view class="box" v-if="code">
            <view class="thumb">
                <image :src="baseUrl+ValidateInfo.product_product.thumbs_text" mode="aspectFill" width="100%" height="100%" />
            </view>

            <view class="info">
                <view class="validate">
                    <view class="icon">
                        <image src="/static/images/validate_active.png"></image>
                    </view>
                    <view class="txt">
                        您查询的产品是官方正品!
                        <view>请放心使用！</view>
                    </view>
                </view>

                <view class="line"></view>

                <view class="list">
                    <view class="item">
                        <view class="name">
                            查询次数：
                        </view>
                        <view class="value">
                            {{ValidateInfo.query_num}}
                        </view>
                    </view>

                    <view class="item">
                        <view class="name">
                            防伪码：
                        </view>
                        <view class="value text-container">
                            <text class="copy-text">{{ValidateInfo.query_code}}</text>
                            <u-icon name="复制" size="18" color="#18bc9c" @click="CopyText"></u-icon>
                        </view>
                    </view>

                    <view class="item">
                        <view class="name">
                            首次查询时间：
                        </view>
                        <view class="value">
                            {{ValidateInfo.query_time_text}}
                        </view>
                    </view>

                    <view class="item">
                        <view class="name">
                            防伪码所属产品：
                        </view>
                        <view class="value">
                            {{ValidateInfo.product_product.name}}
                        </view>
                    </view>
                </view>

                <view class="code" v-if="ValidateInfo.query_qrcord">
                    <image :src="baseUrl+ValidateInfo.query_qrcord" show-menu-by-longpress mode="aspectFit" />
                    <!-- show-menu-by-longpress 开启长按图片显示识别小程序码菜单 -->
                </view>
                <view class="action">
                    <u-button type="success" text="更换防伪码" color="rgb(24, 188, 156)" :customStyle="infoBtn" @click="show = true"></u-button>
                </view>
            </view>
        </view>
        <view v-else>
            <u-empty mode="data"></u-empty>
        </view>

        <!-- 信息提示 -->
		<u-toast ref="notice"></u-toast>

        <!-- 模态框 -->
		<u-modal :show="show" :content="content" :showCancelButton="true" @cancel="show = false" @confirm="GetGenerate"></u-modal>
    </view>
</template>

<script>
export default{
    onLoad(options)
    {
        this.code = options.code ? options.code : ''
    },
    onReady()
    {
        this.GetInfoData()
    },
    data() {
        return {
            code: '',
            ValidateInfo:{
                product_product:{}
            },
            infoBtn:{
                width: '40%',
            },
            show: false,
            content: '是否确认生成新的防伪码',
            baseUrl:getApp().globalData.baseUrl
        }
    },
    methods:{
        CopyText() //复制方法
        {
            let text = this.ValidateInfo.query_code;

            //调用复制剪切板接口方法
            uni.setClipboardData({
                data: text,
            })
        },
        async GetInfoData() //请求数据 
        {
            if(!this.code) return false
            let result = await uni.$u.http.post('business/ProductInfo', {code: this.code})

            if (result.code == 0)
            {
                this.code = ''
                this.ValidateInfo = {}
                
                this.$refs.notice.show({
                    message: result.msg,
                    type: 'error',
                })
                return false;
            }

            this.ValidateInfo = result.data
        },
        async GetGenerate() //更换防伪码
        {
            this.show = false

            let result = await uni.$u.http.post('business/GenerateCode', {code: this.ValidateInfo.query_code})

            if (result.code == 0)
            {
                this.$refs.uToast.show({
                    message: result.msg,
                    type: 'error',
                })
                return false;
            }

            this.ValidateInfo = result.data
        }
    }
}
</script>

<style>
	page
	{
		background-color: #eee;
		padding-bottom: 10px;
	}

	.container
	{
		width: 100%;
		margin: 0 auto;
	}

	.thumb
	{
		width: 100%;
		height: 280px;
		overflow: hidden;
	}

	.thumb image
	{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.info
	{
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
		margin-top: 10px;
		padding: 0 10px 10px;
	}

	.info .validate
	{
		display: flex;
		align-items: center;
		padding: 10px 0 10px 10px;
	}

	.info .validate image
	{
		width: 50px;
		height: 50px;
		margin-right: 10px;
	}

	.info .validate .txt
	{
		font-size: 14px;
	}

	.info .validate .txt view
	{
		font-size: 12px;
		color: #9b9b9a;
		margin-top: 5px;
	}

	.info .line
	{
		width: 100%;
		height: 1px;
		background: #ebebeb;
		margin: 0 auto;
		margin-bottom: 10px;
	}

	.info .list .item
	{
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.info .list .item .name
	{
		color: #9b9b9a;
	}

	.info .code
	{
		width: 100%;
		height: 280px;
		margin: 15px 0px;
	}

	.info .code image
	{
		width: 100%;
		height: 100%;
	}

	.text-container
	{
		display: flex;
		align-items: center;
	}

	.copy-text
	{
		margin-right: 10px;
		font-size: 16px;
	}
</style>